<template>
<!-- 夕会用户明细 -->
  <div class="morning-container">
    <van-list
      v-model="loading"
      loading-text="加载中"
      :finished="finished"
      finished-text="没有更多了"
      @load="onload"
    >
      <div class="morning-users-list">
        <div class="users-list-item" v-for="item in list" :key="item.DEVICE_NUMBER">
          <div class="info-detail">
            <span class="info-phone">{{ item.DEVICE_NUMBER }}</span>
            <span v-show="item.ACCEPT_DATE" class="info-time">{{ item.ACCEPT_DATE }}</span>
          </div>
          <div class="info-desc" style="margin-bottom:4px">产品：{{ item.PRODUCT }}</div>
          <div class="info-desc">套餐费：<span class="item-value">￥{{ item.DINNER_FEE || 0 }}</span></div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { kpiEveningUsersCommon } from '@/api/publicline/board.js'

export default {
  components: { },
  data() {
    return {
      list: [],
      dayId: '',
      levelName: '',
      type: '',
      queryParams: {
        pageNum: 1,
        pageSize: 15
      },
      loading: false,
      finished: false,
    }
  },
  created() {
    this.levelName = this.$route.query.id
    this.type = this.$route.query.type
  },
  mounted() {
    this.loadData()
  },
  beforeDestroy() {
    Toast.clear()
  },
  methods: {
    async loadData(force) {
      // 改变搜索条件，重新查询
      if ( force ) {
        this.queryParams.pageNum = 1
        this.list = []
        this.finished = false
      }
      this.loading = true
      const res = await kpiEveningUsersCommon({ ...this.queryParams, levelName: this.levelName, detailType: this.type })
      const { result, success } = res
      if(success) {
        this.loading = false
        if(result.list.length < this.queryParams.pageSize) {
          this.finished = true
          Toast({
            message: '已全部加载',
            duration: 500,
            position: 'bottom',
            forbidClick: 'true'
          });
        }
        this.list = this.list.concat(result.list)
        Toast.clear()
      }
    },
    onload() {
      this.loading = false
      if(this.finished === false) {
        Toast({
          type:'loading',
          duration: 0,
          message: '正在加载',
          position: 'bottom',
          forbidClick: 'true'
        })
        this.queryParams.pageNum = parseInt(this.queryParams.pageNum) + 1
        this.loadData()
      } else {
        Toast({
          message: '已全部加载',
          duration: 500,
          position: 'bottom',
          forbidClick: 'true'
        })
      }
    },
  }
}
</script>
<style lang="less" scoped>
.morning-container {
  .morning-users-img {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    img {
      width: 16px;
    }
    .title {
      color: #333;
      font-size: 16px;
      margin-left: 6px;
    }
  }
  .morning-users-list {
    .users-list-item {
      background: #FFFFFF;
      box-shadow: 0 2px 4px 1px #f3f7fa;
      border-radius: 6px;
      margin: 0 8px 6px;
      padding: 16px;
      .info-detail {
        margin-bottom: 8px;
      }
      .info-phone {
        color: 333;
        margin-right: 16px;
      }
      .info-time {
        border: 1px solid #4D98FF;
        border-radius: 3px 8px 3px 8px;
        color: #4D98FF;
        font-size: 12px;
        padding: 0 6px;
      }
      .info-desc {
        font-size: 12px;
        color: #666;
      }
      .item-value {
        color: #FD806E;
        padding-left: 10px;
      }
    }
  }
}
</style>